<template> 
 <el-container style="height: 100vh; border: 0px solid #eee">
    <!-- 顶栏 -->
    <el-header height="60px" style="text-align: center; font-size: 24px ">
      <el-menu router
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color=" #87888a"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/student/page">首页</el-menu-item>
        <!-- <el-submenu index="2">
          <template slot="title">分类</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">热门课程</el-menu-item> -->
        <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="out">
            <i class="el-icon-switch-button"  style="margin-right: 15px;margin :20px" ></i>
            <el-dropdown-menu  slot="dropdown">
              <el-dropdown-item  >退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <span>{{username}}</span>
        </el-header> 
      </el-menu>

    </el-header>
    <el-container>
      <el-container>
        <el-main>
        <router-view></router-view>
        </el-main>
        <!-- <el-footer>
              <el-carousel height="100px" direction="vertical" :autoplay="false">
              <el-carousel-item v-for="item in 3" :key="item">
              <h3 class="medium">{{ item }}</h3>
              </el-carousel-item>
              </el-carousel>
        </el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {getCookie,removeCookie} from '@/libs/cookie'

export default {
    data() {
        return {
            cmdd:'',
            activeIndex: '1',
            activeIndex2: '',
            username:'',
        }
    },
     mounted(){
      let user = JSON.parse(getCookie("user") || '{}');
      this.username = user.nickname
    },
    methods: {
      out(){
      removeCookie("user")
      this.$router.push("/");
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
/* .el-header {
  background-color: #b3b5b8;
  color: white;
  line-height: 60px;
   text-align:left;
} */
/* .el-footer {
  background-color: #909399;
  color: black;
  text-align: center;
} */
/* .el-aside {
  background-color: chartreuse;
} */

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>